<template>
  <div class="singer">
    <div>
      <div class="singer_top">
      <span class="return_go iconfont" @click="fnreturn">&#xe625;</span>
<!--        Singer classification-->
      <span class="singer_details">歌手分类</span>
<!--      <span class="star iconfont">推荐指数：&#xe7a9;&#xe7a9;&#xe7a9;</span>-->
<!--      <span class="sousuo_details iconfont">&#xe633;</span>-->
      </div>


      <div class="show_hide">
        <span>全部歌手</span>
      </div>

<el-dropdown>
  <span class="el-dropdown-link">
    <span class="filter iconfont" @click="fnshow">&#xe61e;</span>
    <span>筛选</span><i class="el-icon-arrow-down el-icon--right"></i>
  </span>

  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="(i, j) in kinds" :key="j">
        <p @click="get_singer(i)">{{i}}</p>
    </el-dropdown-item>
    
  </el-dropdown-menu>
</el-dropdown>

</div>

    <div class="hot-singers"><span class="hot-singer">华语男歌手</span></div>

    <div class="singers">
      <div class="songer_list_des">
        <ul>
                <li class="singer_li" v-for="(item,index) in singer.info" :key="index" @click="goToDetails(item.singer_id)">
                  <img :src=item.singer_pic  alt="" class="singer_img">
                  <span>{{item.singer_name}}</span>
                </li>
          </ul>
      </div>
    </div>


    <div>

    </div>

<div class="block">
<!--  <span class="demonstration">大于 7 页时的效果</span>-->
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>

</div>


</template>

<script>
  export default {
      name: 'singer',
      data() {
          return {
              rest: '',
              hot_singers: '',
              singer:'',
              kinds: '',
              page_num: 1
          }
      },

      methods: {
          goToDetails(id){
            if(true){
              this.$router.push(
                {
                  name:'/details_singer_des',
                  query:{
                    id:id
                  }
                })
            }
          },
          fnshow(){
            if(true){
                hide_show = true;
                  }
              },
          fnreturn(){
            if(true){
                this.$router.push('/index/find')
            }
        },
        get_kinds() {
            this.$http.get(this.$store.state.baseUrl+"/singer/kinds/api")
                .then((res) => {
                    this.kinds = res.data
                })
                .catch((res) => {
                    console.log("失败的回调", res)
                })
        },
        get_singer(kind) {
            this.$http.get(this.$store.state.baseUrl+"/singer/artist/cat/api/?"+"kind="+kind+"&page_num="+this.page_num)
                .then((res) => {
                    this.singer = res.data
                })
                .catch((res) => {
                    console.log("失败的回调", res)
                })
        },

      },
      mounted () {
        // 调用一下
        this.get_singer("华语男歌手");
        this.get_kinds();

    }
  }
</script>

<style scoped>
  .singer{
    width: 100%;
  }
  .return_go{
    padding-left: 1.5rem;
    font-size: 1.8rem;
  }
  .singer_top{
    top: 0;
    left: 0;
    width: 100%;
    background: #f1f1f1;
    margin-top: 0;
    position:fixed;
    font-size: 1.2rem;
    /*color: gainsboro;*/
    line-height: 3.75rem;
    z-index: 10000;
    /*background: rgb(0,0,0,0.5);*/
  }
  .mybox-leave-active,.mybox-enter-active{
      transition: all 1s ease;
}
.mybox-leave-active,.mybox-enter{
opacity:0 !important;
}
.show_hide{
  display: inline-block;
}

.mybox-leave,.mybox-enter-active{
  opacity: 500;
}
.el-dropdown-link{
  padding-left: 16rem;
  font-size: 1.2rem;
}
.show_hide{
  font-size: 1.2rem;
  margin-top: 1rem;
  padding-left: 1.2rem;
}
.singer_img{
  width: 2rem;
  border: 0.1rem solid #f1f1f1;
  border-radius: 50%;
  vertical-align: middle;
}
.singers{
  margin-top: 1rem;
}
.hot-singer{
  padding-left: 1rem;
}
.singer_li{
  vertical-align: middle;

}
.songer_list_des{
  margin-top: 1.2rem;
}
.block{
  margin-top: 1.5rem;
}








@font-face {
  font-family: 'iconfont';  /* project id 1482310 */
  src: url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.eot');
  src: url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.woff') format('woff'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.svg#iconfont') format('svg');
}
  .iconfont {
    font-family: "iconfont" !important;
    /* font-size: 30rem; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.02rem;
    -moz-osx-font-smoothing: grayscale;
  }

</style>


